import React from 'react';
import { Dropdown, Avatar, Space, Typography, Badge } from 'antd';
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  BellOutlined,
  MailOutlined,
  KeyOutlined,
  SecurityScanOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/store/auth';
import { useUserStore } from '@/store/user';

const { Text } = Typography;

interface UserProfileDropdownProps {
  className?: string;
}

const UserProfileDropdown: React.FC<UserProfileDropdownProps> = ({ className }) => {
  const navigate = useNavigate();
  const { logout } = useAuthStore();
  const { user } = useUserStore();

  
  const userMenuItems = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人信息',
      onClick: () => navigate('/profile'),
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '账户设置',
      onClick: () => navigate('/settings'),
    },
    {
      key: 'security',
      icon: <SecurityScanOutlined />,
      label: '安全设置',
      onClick: () => navigate('/security'),
    },
    {
      key: 'change-password',
      icon: <KeyOutlined />,
      label: '修改密码',
      onClick: () => navigate('/change-password'),
    },
    {
      type: 'divider' as const,
    },
    {
      key: 'notifications',
      icon: <Badge count={3} dot>
        <BellOutlined />
      </Badge>,
      label: '消息通知',
      onClick: () => navigate('/notifications'),
    },
    {
      key: 'messages',
      icon: <MailOutlined />,
      label: '消息中心',
      onClick: () => navigate('/messages'),
    },
    {
      type: 'divider' as const,
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: logout,
      danger: true,
    },
  ];

  const getAvatarText = () => {
    if (user?.name) {
      return user.name.charAt(0).toUpperCase();
    }
    if (user?.username) {
      return user.username.charAt(0).toUpperCase();
    }
    if (user?.email) {
      return user.email.charAt(0).toUpperCase();
    }
    return <UserOutlined />;
  };

  const getDisplayName = () => {
    if (user?.name) {
      return user.name;
    }
    if (user?.username) {
      return user.username;
    }
    if (user?.email) {
      return user.email;
    }
    return '未知用户';
  };

  return (
    <Dropdown
      menu={{ items: userMenuItems }}
      placement="bottomRight"
      trigger={['click']}
      className={className}
    >
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        cursor: 'pointer',
        padding: '6px 12px',
        borderRadius: 6,
        transition: 'all 0.3s',
        border: '1px solid transparent',
      }}
      className="user-profile-dropdown"
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = 'rgba(24, 144, 255, 0.05)';
        e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.2)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = 'transparent';
        e.currentTarget.style.borderColor = 'transparent';
      }}
      >
        <Badge dot={false}>
          <Avatar
            size="small"
            style={{
              backgroundColor: '#1890ff',
              color: 'white',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {getAvatarText()}
          </Avatar>
        </Badge>
        <Space direction="vertical" size={0} style={{ lineHeight: 1 }}>
          <Text style={{ fontSize: 14, fontWeight: 500 }}>
            {getDisplayName()}
          </Text>
          {user?.role && (
            <Text style={{ fontSize: 12, color: '#666' }}>
              {user.role}
            </Text>
          )}
        </Space>
      </div>
    </Dropdown>
  );
};

export default UserProfileDropdown;